<template>
	<view class="winnerList">
		<image class="bgImg" src="https://wx.2024csnl.com/static/mine/winnerBg.png"></image>
		<view class="contentBox">
			<view class="between">
				<view>
					<image class="backIcon" src="https://wx.2024csnl.com/static/mine/back.png" @click="goBack(100)">
					</image>
				</view>
				<view class="pageTit">获奖名单</view>
				<view></view>
			</view>
		</view>
		<view class="mainBox flex-center">
			<view class="oneLine flex" v-for="(item,i) in list" :style="[calcStyle(list.length, i)]" :key="i">
				<image src="https://wx.2024csnl.com/static/noAddress.png"></image>
				<view>{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getParticipationWinning
	} from "../../api/index.js"
	export default {
		data() {
			return {
				list: [],
				allList: [],
				idx: 0,
			}
		},
		onLoad(opt) {
			this.onGetParticipationWinning(opt.stage)
		},
		onBackPress() {
			console.log('返回')
			this.$emit('back', true);
		},
		computed: {

		},
		methods: {
			calcStyle(length, i) {
				const idx = length - 1 - i;
				const scale = idx < 3 ? idx / 10 + 0.6 : 1;
				return `transform: translateY(${(idx) * -80}px) scale(${scale}, ${scale});`
			},
			async onGetParticipationWinning(stage) {
				const res = await getParticipationWinning(`s=/ApiChoujiang/winprizelist&stage=${stage}`)
				let {
					msg,
					status,
					data,
				} = res.data
				if (status == 1) {
					this.allList = data.slice()
					if (data.length >= 6) {
						this.list = data.splice(0, 6)
						this.idx = this.list.length
					} else {
						this.idx = 0
					}
					let timer = setInterval(() => {
						if (this.idx == this.allList.length) {
							this.idx = 0
						}
						this.list.push(this.allList[this.idx])
						this.idx += 1
					}, 2000)
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.winnerList {

		position: relative;
		height: 100vh;
		overflow: hidden;

		.mainBox {
			overflow: hidden;
			height: 80vh;
			flex-direction: column;
			width: 99vw;
			position: absolute;
			top: 100rpx;
			padding-top: 100rpx;

			.oneLine {
				position: absolute;
				bottom: 0;
				transition: all .5s;
				margin-bottom: 60rpx;
				align-items: center;
				width: 90vw;
				background: #FFFFFF;
				border: 6rpx solid #FFD454;
				border-radius: 60rpx;

				image {
					width: 80rpx;
					margin-left: 28rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				view {
					font-size: 30rpx;
					color: #333;
				}
			}

			.activeOne {
				transform: scale(0.7, 0.7);
				margin-bottom: 30rpx;
			}

			.activeTwo {
				transform: scale(0.6, 0.6);
				margin-bottom: 20rpx;
			}

			.activeThree {
				transform: scale(0.5, 0.5);
				margin-bottom: 10rpx;
			}


		}


		.pageTit {
			font-size: 38rpx;
			color: #fff;
		}

		.backIcon {
			width: 24rpx;
			height: 40rpx;
			margin-left: 30rpx;
		}

		.bgImg {
			width: 100vw;
			min-height: 100vh;
		}

		.contentBox {
			overflow: hidden;
			width: 100%;
			top: 60rpx;
			position: absolute;
		}
	}
</style>